<template>
	<view class="attend-activity">
		<uv-navbar title="参与活动" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
		
		<!-- NFC营销推广横幅 -->
		<view class="nfc-promotion-banner" @click="goToNfcIntro">
			<view class="banner-content">
				<view class="banner-icon">📱</view>
				<view class="banner-text">
					<uv-text text="NFC智能营销" size="32rpx" bold color="#fff" />
					<uv-text text="一碰即得，轻松获客" size="24rpx" color="rgba(255,255,255,0.9)" />
				</view>
				<view class="banner-arrow">→</view>
			</view>
		</view>
		
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar title="参与活动" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
			</template>
		    <view class="item"v-for="(item,index) in dataList" :key="item.id">
				<view class="box"  @click="goDetails(item.id)">
					<image :src="item.images?item.images[0]:'@/static/images/community/item03.png'" mode="widthFix" class="w-full" />
					<view class="title">
						<uv-text :text="item.title" size="30rpx" :color="color_black" />
					</view>
					<uv-text prefixIcon="clock" :text="item.event_start_time+'~'+item.event_end_time" size="24rpx" :color="color_black"
						:iconStyle="{marginRight: '10rpx'}" />
				</view>
			</view>
			
			
		</z-paging>
		
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getIconPath } from '@/util'
    import { 
		getActivity
	} from '@/api';
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
	const color_red = uni.$config.color.red
	const color_black = uni.$config.color.black
	const goDetails=(id)=>{
		// uni.navigateTo({
		//   url: '/pages/ask/activity?id='+id
		// });
	}
	
	const paging = ref(null)
	const dataList = ref([])
	const queryList = (pageNo, pageSize) => {
	        getActivity({ page:pageNo,limit:pageSize }).then(res => {
			    paging.value.complete(res.result.data);
			}).catch(res => {
				paging.value.complete(false);
			})
	}
	
	const goToNfcIntro = () => {
		uni.navigateTo({
			url: '/pages-nfc/marketing-intro'
		})
	}
	
	
	
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>


<style lang="scss" scoped>
	.attend-activity {
		::v-deep .uv-status-bar {
			background-image: none !important;
			background-color: #EAA8AD !important;
		}
	}
	.item {
		margin: 0 14rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.box {
		padding: 26rpx;
	}
	
	.content {
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	
	.title {
		margin: 20rpx 0;
	}
	
	.nfc-promotion-banner {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		
		.banner-content {
			display: flex;
			align-items: center;
			
			.banner-icon {
				font-size: 60rpx;
				margin-right: 30rpx;
			}
			
			.banner-text {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 10rpx;
			}
			
			.banner-arrow {
				font-size: 40rpx;
				color: #fff;
			}
		}
	}
</style>


















